<template>
  <div
    :style="{
      fontSize: detail.style.fontSize + 'px',
      fontFamily: detail.style.fontFamily,
      color: detail.style.fontColor,
      textAlign: textAlign,
      lineHeight: lineHeight + 'px',
    }"
  >
    <div style="display: flex">
      <div v-if="deviceSetting.type === 'fixedParam'">
        <div v-if="deviceSetting.paramList.length > 5">
          <el-select
            v-model="deviceSetting.value"
            filterable
            :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          >
            <el-option
              v-for="setting2 in deviceSetting.paramList"
              :key="setting2.value"
              :label="setting2.name"
              :value="setting2.value"
            />
          </el-select>
          <el-button
            type="primary"
            :disabled=" deviceSetting.disabled || detail.dataBind.editModel"
            @click.stop="paramListSetting(deviceSetting)"
          >{{ $t('confirm') }}
          </el-button>
        </div>
        <el-button
          v-for="(setting2,index2) in deviceSetting.paramList"
          v-else
          :key="index2"
          type="primary"
          :plain="setting2.value !==deviceSetting.value"
          :disabled="setting2.disabled || detail.dataBind.editModel"
          @click="btnGroupSetting(setting2)"
        >{{ setting2.name }}
        </el-button>
      </div>
      <div v-else-if="deviceSetting.type === 'switch'">
        <el-switch
          v-model="deviceSetting.value"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          active-value="1"
          inactive-value="0"
          @change="switchChange(deviceSetting)"
        />
      </div>
      <div v-else-if="deviceSetting.type === 'time'">
        <el-time-picker
          v-model="deviceSetting.value"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          style="width:300px"
          value-format="HH:mm"
          format="HH:mm"
          :placeholder="$t('timing')"
        />
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="oneTimeChange(deviceSetting)"
        >{{ $t('confirm') }}
        </el-button>
      </div>
      <div v-else-if="deviceSetting.type === 'timeSlot'">
        <!--        <el-time-picker-->
        <!--          v-model="deviceSetting.beginTime"-->
        <!--          :disabled="deviceSetting.disabled || detail.dataBind.editModel"-->
        <!--          style="width:148px"-->
        <!--          value-format="HH:mm"-->
        <!--          format="HH:mm"-->
        <!--          :placeholder="$t('startDate')"-->
        <!--        />-->
        <!--        <el-time-picker-->
        <!--          v-model="deviceSetting.endTime"-->
        <!--          :disabled="deviceSetting.disabled || detail.dataBind.editModel"-->
        <!--          style="width:148px"-->
        <!--          value-format="HH:mm"-->
        <!--          format="HH:mm"-->
        <!--          :placeholder="$t('endDate')"-->
        <!--        />-->
        <time-slot v-model="deviceSetting.value" :disabled="deviceSetting.disabled || detail.dataBind.editModel" />
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="twoTimeChange(deviceSetting)"
        >{{ $t('confirm') }}
        </el-button>
      </div>
      <div v-else-if="deviceSetting.type === 'noParam'">
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="btnSetting(deviceSetting)"
        >{{ $t('confirm') }}
        </el-button>
      </div>
      <div v-else-if="deviceSetting.type === 'slider'">
        <el-slider
          v-model="deviceSetting.value"
          style="width:200px"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @change="switchChange(deviceSetting)"
        />
      </div>
      <div v-else>
        <el-input v-model="deviceSetting.value" style="width:300px" :disabled="deviceSetting.disabled || detail.dataBind.editModel" />
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="setParameter(deviceSetting)"
        >{{ $t('confirm') }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseView from '../View'
import {
  getDeviceSetting,
  sendDeviceSetting
} from '@/api/iot/iotDeviceSettingApi'
import {
  successNotice
} from '@/util/common'
import TimeSlot from '@/components/TimeSlot'
export default {
  name: 'IotSetting',
  components: {
    TimeSlot
  },
  extends: BaseView,
  props: {},
  data() {
    return {
      deviceSetting: {}
    }
  },
  watch: {
    detail: function(newVal) {
      this.getDeviceSetting()
    }
  },
  created() {
    this.getDeviceSetting()
  },
  methods: {
    setParameter(item) {
      this.deviceSetting = item
      this.updateVal()
    },
    btnSetting(item) {
      this.deviceSetting = item
      this.updateVal()
    },
    paramListSetting(item) {
      this.deviceSetting = item
      this.updateVal()
    },
    btnGroupSetting(item) {
      this.deviceSetting = item
      this.updateVal()
    },
    switchChange(item) {
      this.deviceSetting = item
      this.updateVal()
    },
    oneTimeChange(item) {
      this.deviceSetting = item
      this.updateVal()
    },
    twoTimeChange(item) {
      this.deviceSetting = item
      // this.deviceSetting.value = item.beginTime + ' / ' + item.endTime
      this.updateVal()
    },
    updateVal() {
      const that = this
      const json = {
        tag: 'manage',
        settingId: that.deviceSetting.settingId,
        keyName: that.deviceSetting.keyName,
        value: that.deviceSetting.value,
        port: that.deviceSetting.port,
        time: 2000
      }
      sendDeviceSetting(json).then(res => {
        const { code } = res
        that.settingLoading = false
        if (code === '200') {
          successNotice(that)
        }
        that.getDeviceSetting()
      })
    },
    getDeviceSetting() {
      const that = this
      getDeviceSetting({
        deviceCore: this.detail.dataBind.deviceCore,
        keyName: this.detail.dataBind.keyName,
        port: this.detail.dataBind.port
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.deviceSetting = data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
  @import '@/styles/element-variables.scss';

  .primary-color {
    color: $--color-primary;
  }

</style>
